<template>
  <div style="width: 100%;height: 100%;">
    <el-tabs v-model="activeName" class="root">
      <el-tab-pane
        name="dydb"
        label="多元对比结果"
        :lazy="true"
        style="height: 100%;width: 100%;"
      >
        <dydb></dydb>
      </el-tab-pane>
      <el-tab-pane
        name="dldb"
        label="单列对比结果"
        :lazy="true"
        style="height: 100%;width: 100%;"
      >
        <dldb></dldb>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import dldb from './dldb';
import dydb from './dydb';

export default {
  name: 'index',
  data() {
    return {
      activeName: 'dydb',
      resultData: [],
      params: null,
    };
  },
  components: { dydb, dldb },
  watch: {
    activeName: {
      handler(val, oldVal) {
        if (val) {
          this.$store.commit('changeActivePath', [val]);
        }
      },
      immediate: true,
    },
    activeMenu: {
      handler(val, oldVal) {
        if (val && val.length > 0) {
          if (val[0].children) {
            this.activeName = val[0].children[0].path;
          }
        }
      }
    },
  },
  computed: {
    activeMenu() {
      return this.$store.getters.getActiveMenu;
    },
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    this.$nextTick(() => {
      console.info(this.activeMenu);
      // this.$store.commit('changeActivePath', [this.activeMenu]);
      //   this.$store.commit('setActiveMenu', [index]);
    });
  },
  activated() {
    this.$store.commit('changeActivePath', [this.activeName]);
  }
};
</script>

<style scoped lang="less">
.root {
  flex: auto;
  height: 100%;
  display: flex;
  flex-direction: column;

  /deep/ .el-tabs__header {
    padding-left: 15px;
  }
  /deep/ .el-tabs__content {
    flex-grow: 1;
    overflow-y: scroll;
    display: flex;

    .el-tab-pane {
      flex: 1;
    }
  }
}
</style>
